export const getList = (listData) => {
  return listData.map(v => {
    const {icon, url, badge, ip, folder, userAgent, isDeny} = v;
    const src = `./static/ASSETS/osicons/${icon}`;
    return `
     <li class=${badge.key} >
          <div class="img-wrapper">
            <img width="80" height="80" src=${src} alt=${icon}>
          </div>
          <div class="btn-content-wrapper">
            <div class="top">
              <div class="website">
                <span class="icon icon-desktop"></span>
                ${url}
                <span class="status idle">${badge.key}</span>
              </div>
              <div class="info">
                <div class="ip">
                  <span class="icon icon-info"></span>
                  ${ip}
                </div>
                <div class="folder">
                  <span class="icon icon-folder"></span>
                  ${folder}
                </div>
              </div>
            </div>
            <div class="btm">
              <div class="list">
                <div class="add-item">
                  <span class="icon-plus"></span>
                </div>
                
                <div class="item-list clearfix">
                   ${
      userAgent.map(s => {
        return `
        <div class="item">
                    <span>${s}</span>
                    <span class="icon-trash"></span>
                  </div>
        `;
      }).join('')
      }
                </div>
               
              </div>
              ${
      isDeny ? `
      <div class="is-deny">
                <span class="icon-deny"></span>
                Deny
              </div>
      ` : ''
      }
              
            </div>
          </div>
        </li>
`;
  });
}
export const getUserAgent = (userAgentArr) => {
  return userAgentArr.map(s => {
    return `
        <div class="item">
                    <span>${s}</span>
                    <span class="icon-trash"></span>
                  </div>
        `;
  }).join('');

}
